<template>
  <div class="singer-detail" v-nores="noRes">
    <div>
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed
        placeholder
      />
      <div class="backimg_warp" @click="clickRandom" v-if="songs.length > 0">
        <van-image fit="scale-down" :src="backImg" />
        <div class="random_content">
          <van-icon name="music" />
          <div class="random_title">随机播放</div>
        </div>
      </div>
    </div>

    <div class="songs_warp" v-loading="loading" :style="{ paddingBottom: pad }">
      <div
        class="song_item"
        v-for="(item, index) in songs"
        :key="item.id"
        @click="selectSong(item, index)"
      >
        <p>{{ item.name }}</p>
        <div class="singer">
          <span>{{ item.singer }}</span>
          <span style="margin-left:8px;">{{ item.album }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSingerDetail } from '@/service/singer'
import { processSongs } from '@/service/song'
import { getStorage, removeStorage } from '@/utils/storage'
import { SINGER_KEY } from '@/assets/js/constant'
import { mapActions } from 'vuex'
export default {
  name: 'singerDetail',
  data() {
    return {
      songs: [],
      singer: {},
      loading: false
    }
  },
  computed: {
    title() {
      return this.singer.name
    },
    backImg() {
      return this.singer.pic
    },
    noRes() {
      return !this.loading && this.songs.length === 0
    },
    pad() {
      return this.$store.state.playlist.length > 0 ? '60px' : '0'
    }
  },
  methods: {
    ...mapActions(['selectPlay', 'randomPlay']),
    onClickLeft() {
      this.$router.go(-1)
    },
    selectSong(item, index) {
      this.selectPlay({
        list: this.songs,
        index
      })
    },
    clickRandom() {
      this.randomPlay(this.songs)
    }
  },
  async created() {
    this.loading = true
    const singer =
      this.$route.params && this.$route.params.name
        ? this.$route.params
        : getStorage(SINGER_KEY)
    if (!singer) {
      const path = this.$route.matched[0].path
      this.$router.push({
        path
      })
      this.loading = false
      return
    }
    this.singer = singer
    const res = await getSingerDetail(this.singer)
    this.songs = await processSongs(res.songs)
    this.loading = false
    console.log(this.songs)
  },
  onUnmounted() {
    removeStorage(SINGER_KEY)
  }
}
</script>
<style lang="scss" scoped>
.singer-detail {
  // width: 100%;
  // height: 100vh;
  .van-image {
    width: 100%;
  }
  .songs_warp {
    width: 100%;
    padding: 20px 30px;
    font-size: 14px;
    .song_item {
      height: 64px;
      width: 100%;
      padding: 5px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .singer {
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.3);
      }
    }
  }
  .backimg_warp {
    position: relative;
    .random_content {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      width: 160px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid $color-theme;
      border-radius: 15px;
      .random_title {
        margin-left: 10px;
        font-size: 14px;
        color: $color-theme;
      }
    }
  }
}
</style>
